<template>
    <div
        v-loading.fullscreen="loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-text="地图数据加载中..."
        class="amap-wrapper"
        :style="'height:' + height + 'px'"
    >
        <el-amap
            class="amap-box"
            :animateEnable="false"
            :plugin="plugin"
            :center="center"
            :zoom="zoom"
            :vid="'amap-vue'"
            :events="mapevents"
        >
            <district-explorer
                @featureChange="change"
                @districtExplorerLoad="districtExplorerLoad"
                @clearData="clearData"
                :center="center"
                :zoom="zoom"
                ref="districtExplorer"
            ></district-explorer>
            <catholic-marker
                v-for="(org, index) in organization_current"
                :options="{
                    content: getInfoConten(childmarkerOrganization, org),
                    position: org.position,
                    events: org.events
                }"
                :key="index + org.title"
                :extData="org"
                @oneMarkerClick="oneMarkerClick"
            ></catholic-marker>
            <custom-marker-cluster
                v-for="(diocese, index) in parish_current"
                :key="index + diocese.title"
                :markerList="diocese.parishlist"
                :renderCluserMarker="contentRender"
                :markerContent="markerContent"
                :extData="diocese"
                @oneMarkerClick="oneMarkerClick"
            ></custom-marker-cluster>
            <el-dialog
                :title="parish_dialog.title"
                :modal="false"
                :visible.sync="parish_visible"
            >
                <el-row :gutter="10">
                    <el-col :xs="24" :md="10">
                        <el-carousel
                            v-if="
                                parish_dialog.image_list !== undefined &&
                                    parish_dialog.image_list.length > 0
                            "
                            :interval="2000"
                            arrow="always"
                        >
                            <el-carousel-item
                                v-for="(item, key) in parish_dialog.image_list"
                                :key="key"
                            >
                                <el-image
                                    fit="contain"
                                    :src="'/imageratio' + item.url + '/280/300'"
                                >
                                    <div slot="placeholder" class="image-slot">
                                        <div class="el-loading-spinner">
                                            <svg
                                                viewBox="25 25 50 50"
                                                class="circular"
                                            >
                                                <circle
                                                    cx="50"
                                                    cy="50"
                                                    r="20"
                                                    fill="none"
                                                    class="path"
                                                ></circle>
                                            </svg>
                                        </div>
                                    </div>
                                </el-image>
                            </el-carousel-item>
                        </el-carousel>
                        <div v-else>(待增加图片)</div>
                    </el-col>
                    <el-col :xs="24" :md="14"
                        ><div class="grid-content bg-purple-light">
                            地址：{{
                                parish_dialog.province +
                                    parish_dialog.city +
                                    parish_dialog.district +
                                    parish_dialog.address
                            }}<br />
                            联系人：<br />
                            电话：<br />
                            本堂司铎：<br />
                            更多资料<span style="color:red"
                                >(内容和图片等有待更新、增加...)</span
                            >
                        </div></el-col
                    >
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="parish_visible = false"
                        >确 定</el-button
                    >
                </span>
            </el-dialog>
        </el-amap>
    </div>
</template>
<script>
import { DistrictExplorer } from "./district-explorer.js";
import { customMarkerCluster } from "../../../amapplugin/custom-marker-cluster.js";
import childmarker from "../../../amapplugin/components/children/marker";
import childmarkerOrganization from "../../../amapplugin/components/children/marker-organization.vue";
import childMarkerClustre from "../../../amapplugin/components/children/marker-cluster";
import { getDioceseListHasParish } from "../../../api/home/diocese";
import { getOrganizationAll } from "../../../api/home/organization";
import { CatholicMarker } from "./catholic-marker.js";
import ParishDialog from "./parish-dialog.vue";
import Vue from "vue";
export default {
    name: "Map",
    data: () => {
        return {
            loading: true,
            reset: false,
            height: 500,
            zoom: 3,
            center: [105.93879, 37.535061],
            plugin: [
                {
                    pName: "ToolBar",
                    position: "RT"
                }
            ],
            parish_list: {},
            parish_current: [],
            parish_dialog: {},
            parish_visible: false,
            organization_list: {},
            organization_current: [],
            info_window_content: "",
            markerContent: (h, extData) => {
                return h(childmarker, {
                    props: { extData }
                });
            },
            contentRender: (h, extData, context) => {
                return h(childMarkerClustre, {
                    props: { context, extData }
                });
            },
            childmarkerOrganization
        };
    },
    created() {
        this.height = document.documentElement.clientHeight - 20;
        let width = document.body.clientWidth;
        switch (true) {
            case width >= 1200:
                this.zoom = 4.4;
                break;
            case width >= 992:
                this.zoom = 4.3;
                break;
            case width >= 768:
                this.zoom = 4.3;
                break;
            case width >= 576:
                this.zoom = 3.3;
                break;
            default:
                this.zoom = 3;
        }
    },
    computed: {
        mapevents() {
            return {
                contextmenu: e => {
                    this.clearData();
                    this.$refs.districtExplorer.reload_district();
                }
            };
        }
    },
    components: {
        DistrictExplorer,
        customMarkerCluster,
        CatholicMarker,
        ParishDialog
    },
    methods: {
        //清除地图数据
        clearData() {
            this.parish_current = [];
            this.organization_current = [];
        },
        districtExplorerLoad() {
            let adcode = this.$route.params.adcode;
            if (adcode) {
                this.$refs.districtExplorer.load_area_node(adcode);
                this.change(adcode);
            } else {
                let adcode = this.$route.params.adcode;
                if (adcode == undefined) {
                    this.loading = false;
                }
            }
        },
        async change(adcode) {
            this.parish_current = [];
            if (this.parish_list[adcode]) {
                this.parish_current = this.parish_list[adcode];
            } else {
                let dioceseData = await getDioceseListHasParish({
                    province_adcode: adcode
                });
                if (dioceseData.status == 200 && dioceseData.data) {
                    this.parish_list[adcode] = dioceseData.data;
                    this.parish_current = dioceseData.data;
                }
            }
            this.organization_current = [];
            if (this.organization_list[adcode]) {
                this.organization_current = this.organization_list[adcode];
            } else {
                let organizationData = await getOrganizationAll({
                    province_adcode: adcode
                });
                if (
                    organizationData.status == 200 &&
                    organizationData.data.data
                ) {
                    this.organization_list[adcode] = this.organization_current =
                        organizationData.data.data;
                }
            }
            this.loading = false;
        },
        oneMarkerClick(e) {
            this.parish_dialog = e.target.getExtData();
            this.parish_visible = true;
            console.log(this.parish_dialog);
            // this.info_window_content = this.getInfoConten(
            //     InfoWindow,
            //     e.target.getExtData()
            // );
            // this.$refs.AdvancedInfoWindow.show(e.target.getExtData().position);
        },
        getInfoConten(compose, extData) {
            let instance = new Vue({
                render: h => {
                    return h(compose, { props: { extData } });
                }
            });
            instance.$mount();
            return instance.$el;
        }
    }
};
</script>
<style>
.amap-wrapper {
    height: 100%;
}
@media only screen and (max-width: 767px) {
    .el-dialog {
        width: 100%;
    }
}
.image-slot {
    height: 80px;
    width: 80px;
}

/* .el-carousel__item .carousel-title {
    position: absolute;
    bottom: -20px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    padding: 2px 10px;
} */
.el-carousel__item {
    display: flex;
    justify-content:center;
}
</style>
